<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html >
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>电影之城</title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700" rel="stylesheet" type="text/css" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
   var len=$("#flash_num>li").length;
   var index=1;
   var int;
   function showSys(num)  //图片切换函数
   {
    $("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
    $("#flash_pic>div").fadeOut(0).eq(num).fadeIn(0);
   }
   function ziDong()  //自动切换
   {
    if(index==len)
    {
     index=0;
    }
    showSys(index);
    index=index+1;
   }
   int=setInterval(ziDong,2000);
   $("#flash_num>li").click(function() //点击切换
   {
    var index_num=$("#flash_num>li").index(this);
    showSys(index_num);
    index=index_num+1;  //改变全局变量的值，以便鼠标移开的时候能够衔接上
   });
   
    $("#flash_num>li").mouseover(function() //鼠标移上去时就切换
   {
    var index_num=$("#flash_num>li").index(this);
    showSys(index_num);
    index=index_num+1;  //改变全局变量的值，以便鼠标移开的时候能够衔接上
   });
   
   $("#movie-img2").mouseover(function()  //移动到上面时停止自动切换
   {
        clearInterval(int);
   });
   $("#movie-img2").mouseout(function()  //移开时继续自动切换
   {
        int=setInterval(ziDong,2000);
   });
	   
});
</script>


</head>
<body>
 
<div id="movie-img">
     <div id="movie-img2">
       <div id="flash_pic">
            <div class="flash-picture"><a href="#"><img src="images/小鱼吃大鱼.jpg" /></a></div>
            <div class="flash-picture" ><a href="#"><img src="images/qingtian.jpg" /></a></div>
            <div class="flash-picture"><a href="#"><img src="images/劫案迷云.jpg" /></a></div>
            <div class="flash-picture"><a href="#"><img src="images/毒战.jpg" /></a></div>
       </div>
       <ul  id="flash_num">
           <li class="click_over">1</li>
           <li class="click_out">2</li>
           <li class="click_out">3</li>
           <li class="click_out">4</li>
       </ul>
    </div>
</div>



</body>
</html>
